<template>
    <view class="contentlist">
        <view class="form">
       
            <uni-list >
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属客户 <text class="red">*</text></view>
                    <view class="bodyc" slot="body">
                        <picker mode = "selector" :range="clientlist" range-key="label" @change="selclient">
                            <view style="display: flex;align-items: center;">
                                <text class="client_name">{{info.client_name || "请选择"}}</text>    &nbsp;&nbsp;&nbsp;&nbsp;<uni-icons type="bottom" size="18"></uni-icons>
                            </view>
                        </picker>
                    </view>
                        
                </uni-list-item>
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属品牌 <text class="red">*</text></view>
                    <view class="bodyc" slot="body">
                        <uni-easyinput class="inputc"
                   
                         :inputBorder="false"
                        v-model="info.brand" placeholder="品牌名称">
                        </uni-easyinput>
                    </view>
                        
                </uni-list-item>
               
                <uni-list-item direction ="row">
                    <view class="titlelo" slot="header">所属项目 <text class="red">*</text></view>
                    <view class="bodyc" slot="body">
                        <uni-easyinput class="inputc"
                     
                         :inputBorder="false"
                        v-model="info.title" placeholder="项目名称/地址">
                        </uni-easyinput>
                    </view>
                        
                </uni-list-item>
            </uni-list>
            
            <view class="tipstitle">售后内容 <text class="red">*</text></view>
            <view class="tipscontent">
                <uni-easyinput type="textarea" v-model="info.content" placeholder="请输入售后内容" />
            </view>
            <view class="tipstitle">售后图片 <text class="red"></text></view>
            <view class="imgbox">
                <view class="imglist">
                    <myupload ref="files" 
                    :imgHeight="150" 
                    :colCount="4" 
                    :limit="limit" 
                    :images="info.images"  
                    imgWidth="680rpx"
                    v-if="showbbss"
                    ></myupload>
                </view>
            </view>
        </view>
      
        <view class="btn" @click="submit()">
            提交保存
        </view>
        <view class="goodslist" v-if="showOrder">
            <template v-if="orderlist.length>=1">
                <view class="list-row" v-for="(item,index) in orderlist" 
                @click="selorder(index)"
                :key="index">
                    <text>{{item.project_name}}</text>
                    <uni-icons type="right" size="14"></uni-icons>
                </view>
            </template>
            <template v-else>
                <view class="list-row empty">
                    搜索不出内容~
                </view>
            </template>
         
        </view>
       
    </view>
</template>

<script>
import myupload from '@/components/myupload.vue'
export default{
    components: {
        myupload
    },
    data(){
        return{
            clientlist: [],
            client_name:"",
            info:{
                id:'',
                cat:'',
                oid:'',
                title:'',
                client_id:'',
                brand:'',
                content:'',
                images:[],
                client_name:''
            },
            orderlist:[],
            catlist:[{title:'道具售后',value:1},{title:'工程售后',vlaue:2}],
            role_id:null,
            cat_name:'',
            keyword:'',
            showOrder:false,
            uploadUrl:'',
            header:{},
            limit:30,
            showbbss:false
            
        }
    },
    onLoad(option) {
        this.getdesignerlist() 
        this.uploadUrl = this.$api.postURL+'user/upload'
        this.header = {Authorization:uni.getStorageSync('nangtong_login_token')}
        if(option && option.id){
            this.getdetails(option.id)
        }else{
            this.showbbss = true
        }
    },
    onShow() {
        var role_id = uni.getStorageSync('nantong_role_id');
        this.role_id = role_id
      
        if(!this.info.id){
            if(role_id == 1){
                this.cat_name = "道具售后"
                this.info.cat = 1 
            }else if(role_id == 12){
                this.cat_name = "工程售后"
                this.info.cat = 2
            }else{
                this.cat_name = "道具售后"
                this.info.cat = 1
            }
        }
        
    },
    methods:{
        selclient(e){
            this.info.client_name = this.clientlist[e.detail.value].label
            this.info.client_id = this.clientlist[e.detail.value].id
        },
        getdesignerlist(){
            this.$api.get(`client/list`).then((res)=>{
                this.clientlist = res.data
            })
        },
        getdetails(id){
            this.$api.get(`sales_after/details?id=${id}`).then(({data})=>{
                this.info = data.info
                this.cat_name = data.cat_name
                this.showbbss = true
            })
        },
        submit(){
           if(!this.info.cat){
               this.$error('CAT错误')
               return false;
           } 
           // if(!this.info.oid){
           //     this.$error('请选择售后订单')
           //     return false;
           // }
           if(!this.info.content){
               this.$error('请输入售后内容')
               return false;
           }
           var imgs = this.$refs.files.contents
           this.info.images = imgs
           uni.showLoading({})
           this.$api.post(`sales_after/submit`,this.info).then(()=>{
               uni.hideLoading()
               this.$success('添加成功')
               uni.navigateBack({data:1})
           }).catch(()=>{
               uni.hideLoading()
           })
        },
        selfile(){
            var _this = this
            var len = 9 - this.info.images.length
            uni.chooseImage({
                count:len,
                success:function(res){
              
                    var array = []
                    res.tempFilePaths.forEach(function(val,index){
                        array.push({
                            name:'file_'+index,
                            uri:val
                        })
                    })
                  
                    uni.showLoading({
                        title:'上传中...',
                        mask:true
                    })
                    var uploadTask = uni.uploadFile({
                        url:_this.$api.postURL+'user/upload',
                        files:array,
                        fileType:"image",
                        name:"file",
                        header:{
                            Authorization:uni.getStorageSync('nangtong_login_token')
                        },
                        formData:{},
                        success: (uploadFileRes) => {
                            var data = JSON.parse(uploadFileRes.data);
                            
                            if(data.code == 0){
                                _this.$error(data.message)
                            }else{
                               _this.$success("上传成功") 
                               _this.info.images = _this.info.images.concat(data.data)
                            }
                        },
                        complete:function(){
                         
                            uni.hideLoading()
                        }
                    })
                  
                },
                
            })
        },
        delimg(index){
            this.info.images.splice(index,1)
        },
        selcat(e){
            this.cat_name = this.catlist[e.detail.value].title
            this.info.cat = this.catlist[e.detail.value].value
        },
        changekeyword(e){
            if(e){
              var url
              
              if(this.info.cat == 1){
                  url = `order/orderlist?keyword=${e}`
              }else{
                  url = `project.order/orderlist?keyword=${e}`
              }
              this.$api.get(url).then(({data})=>{
                
                  this.orderlist = data.data
                  this.showOrder = true
              })  
            }
           
        },
        selorder(index){
            this.showOrder = false
            var item = this.orderlist[index]
            this.info.oid = item.id
            this.info.title = item.project_name
        }
    }
}    
</script>

<style lang="less">
    page{
        // background-color: #fff;
    }
    .contentlist{
        padding: 20rpx;
        .btn{
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            text-align: center;
            color: #fff;
            background-color: #2979ff;
            border-radius: 10rpx;
            margin-top: 60rpx;
        }
    }
    .titlelo{
        font-size: 26rpx;
        font-weight: bold;
        width: 150rpx;
        display: flex;
        align-items: center;
    }
    .bodyc{
        width: 560rpx;
        display: flex;
        justify-content: end;
        font-size: 26rpx;
        align-items: center;
        .client_name{
            margin-right: 10rpx;
        }
        .inputc{
            text-align: right;
        }
        .tips{
            margin-left: 10rpx;
        }
    }
    .table{
       min-height: 300rpx;
    }
    .goodslist{
        width: 90%;
        min-height: 80rpx;
        position: fixed;
        top: 300rpx;
        left: 20rpx;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6rpx 2rpx;
        background-color: #fff;
        padding: 0 20rpx;
        border-radius: 10rpx;
        .list-row{
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1px solid #e9e9eb;
            font-size: 28rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:last-child{
                border: none;
            }
        }
        
    }
    .empty{
        text-align: center;
        display: block !important;
        color: #6a6a6a;
    }
    .tipstitle{
        text-align: center;
        font-weight: bold;
        height: 80rpx;
        line-height: 80rpx;
    }
    .tipscontent{
        width: 710rpx;
        height: 180rpx;
  
        background-color: #fff;
        // padding: 0 20rpx;
        border-radius: 10rpx;
    }
    .imgbox{
        padding: 10rpx;
        
        width: 690rpx;
        height: auto;
        min-height: 250rpx;//    
          
        background-color: #fff;
        // padding: 0 20rpx;
        border-radius: 10rpx;
    }
    .imglist{
        display: flex;
        align-items: center;
    
        
        // .imgone{
        //     width: 170rpx;
        //     height: 170rpx;
        //     border-radius: 5rpx;
        //     overflow: hidden;
        //     text-align: center;
        //     border: 1px solid #c7c9ce;
        //     margin-right: 20rpx;
        //     position: relative;
        //     display: flex;
        //     align-items: center;
        //     justify-content: center;
        //     .close{
        //         position: absolute;
        //         top: 0rpx;
        //         right: 2rpx;
        //         z-index: 9;
        //     }
        //     .thumb{
        //         width: 100%;
        //         height: 100%;
        //     }
        // }
    }
</style>